<template>
    <div style="margin-left: 60px;width: 80vw">
        <div class="addcom">
            <el-form :inline="true" label-position="right" label-width="100px" class="demo-form-inline">
                <div>
                    <!--<el-form-item label="添加商品图片">-->
                        <!--<el-upload action="/mgr/common/imgUpload" list-type="picture-card" accept="image/*"-->
                                   <!--:limit="imgLimit"-->
                                   <!--:file-list="productImgs" :multiple="isMultiple"-->
                                   <!--:on-preview="handlePictureCardPreview"-->
                                   <!--:on-remove="handleRemove" :on-success="handleAvatarSuccess"-->
                                   <!--:before-upload="beforeAvatarUpload"-->
                                   <!--:on-exceed="handleExceed" :on-error="imgUploadError"><i class="el-icon-plus"></i>-->
                        <!--</el-upload>-->
                        <!--<el-dialog :visible.sync="dialogVisible"><img width="100%" :src="dialogImageUrl" alt="">-->
                        <!--</el-dialog>-->
                    <!--</el-form-item>-->
                </div>
                <div>
                    <el-form-item label=" 商品名称：">
                        <el-input v-model="com.name"></el-input>
                    </el-form-item>
                    <el-form-item label=" 商品单价：">
                        <el-input placeholder="单位/元" v-model="com.price"></el-input>
                    </el-form-item>
                </div>
                <div>
                    <el-form-item label=" 是否新品：">
                        <el-select v-model="com.newcommodity">
                            <el-option value="请选择">请选择</el-option>
                            <el-option label="否" value="0"></el-option>
                            <el-option label="是" value="1"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label=" 是否会员：">
                        <el-select v-model="com.membercommodity">
                            <el-option value="请选择">请选择</el-option>
                            <el-option label="否" value="0"></el-option>
                            <el-option label="是" value="1"></el-option>
                        </el-select>
                    </el-form-item>
                </div>
                <div>
                    <el-form-item label=" 1级分类：">
                        <el-select class="fenlei" v-model="com.classoneid" @change="changeOne()">
                            <el-option v-for="p in one"
                                       :key="p"
                                       :value="p.classone"
                                       :label="p.classonename"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label=" 2级分类：">
                        <el-select class="fenlei" v-model="com.classtweid" @change="changeTwe()">
                            <el-option value="请选择">请选择</el-option>
                            <el-option v-for="p in twe" :key="p" :value="p.classtwo"
                                       :label="p.classtwoname"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label=" 3级分类：">
                        <el-select class="fenlei" v-model="com.classthreeid">
                            <el-option value="请选择">请选择</el-option>
                            <el-option v-for="p in three" :key="p" :value="p.classthree"
                                       :label="p.classthreename"></el-option>
                        </el-select>
                    </el-form-item>
                </div>
                <div>
                    <el-form-item label=" 商品库存：">
                        <el-input v-model="com.stock"></el-input>
                    </el-form-item>
                    <el-form-item label=" 商品品牌：">
                        <el-input v-model="com.brand"></el-input>
                    </el-form-item>
                </div>
                <div>
                    <el-form-item label=" 商品包装：">
                        <el-input v-model="comd.packing"></el-input>
                    </el-form-item>
                    <el-form-item label=" 商品保质期：">
                        <el-input v-model="comd.baozhiqi"></el-input>
                    </el-form-item>
                </div>
                <div>
                    <el-form-item label=" 商品尺寸：">
                        <el-input v-model="comd.size"></el-input>
                    </el-form-item>
                    <el-form-item label=" 商品材质：">
                        <el-input v-model="comd.caizi"></el-input>
                    </el-form-item>
                </div>
                <div>
                    <el-form-item label=" 商品吸水性：">
                        <el-input v-model="comd.xishuixing"></el-input>
                    </el-form-item>
                    <el-form-item label=" 商品产地：">
                        <el-input v-model="comd.candi"></el-input>
                    </el-form-item>
                </div>
                <div>
                    <el-form-item label=" 商品厂商：">
                        <el-input v-model="comd.changshang"></el-input>
                    </el-form-item>
                    <el-form-item label="是否上架：">
                        <el-select v-model="com.state">
                            <el-option v-for="s in state"
                                       :key="s"
                                       :label="s.statename"
                                       :value="s.state">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </div>
                <el-form-item style="margin-left: 250px">
                    <el-row :gutter="30">
                        <el-col :span="6">
                            <el-button type="primary" @click="insertProduct()">提交</el-button>
                        </el-col>
                        <el-col :span="9" :offset="9">
                            <el-button type="primary" @click="$router.push({path:'/product/Joincom'})">返回入库</el-button>
                        </el-col>
                    </el-row>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Addcom",
        data() {
            return {
                dialogImageUrl: '',
                dialogVisible: false,
                productImgs: [],
                isMultiple: true,
                imgLimit: 6,

                com: {
                    storeid: '1',
                    name: 'miku',
                    price: '223',
                    newcommodity: '1',
                    membercommodity: '1',
                    brand: 'miku官方',
                    classoneid: '1',
                    classtweid: '2',
                    classthreeid: '3',
                    stock: '10000',
                    state: '1'
                },
                comd: {
                    commodityid: '',
                    brand: 'miku官方',
                    packing: '固定架空立方体',
                    baozhiqi: '10年',
                    size: '高25cm,宽15cm',
                    caizi: '粘土烧制',
                    xishuixing: '无',
                    candi: 'japan',
                    changshang: 'miku官方'
                },
                one: [{classone: '1', classonename: '1'}, {classone: '2', classonename: '2'}],
                twe: [{classtwo: '', classtwoname: ''}],
                three: [{classthree: '', classthreename: ''}],
                state: [{statename: '否', state: '0'}, {statename: '是', state: '1'}]
            }
        }, beforeRouteEnter(to, from, next) {
            next(vm => {
                //在此处vm表示vue组件对象
                vm.loadDataC();
            });
        },
        methods: {
            insertProduct: function () {
                this.com.storeid = 1;
                this.axios.post("/insertComd", this.com)
                    .then((response) => {
                        this.comd.commodityid = response.data;
                        if (this.comd.commodityid == null | this.comd.commodityi == '') {
                            this.$message.error('添加失败');
                        } else {
                            this.insertProductD();
                        }
                    });
            },
            insertProductD: function () {
                var cs = 0;
                this.axios.post("/insertComDe", this.comd)
                    .then((response) => {
                        cs = response.data;
                    })

                this.axios.post("/insertComDe", this.comd)
                    .then((response) => {
                        cs = response.data;
                    })

                setTimeout(() => {
                    if (cs == 1) {
                        this.$message({
                            message: '添加成功',
                            type: 'success',
                        });

                        this.$router.push({path: '/product/Selstock'});
                    } else {
                        this.$message.error('添加失败');
                    }
                }, 2000);

            },
            loadDataC: function () {
                this.axios.get("/QueryClassone", {params: {storeid: 1}})
                    .then((response) => {
                        this.one = response.data;
                    });
            },
            changeOne: function () {
                this.axios.get("/QueryClasstwo", {params: {storeid: 1, classone: this.com.classoneid}})
                    .then((response) => {
                        this.twe = response.data;
                    });
            },
            changeTwe: function () {
                this.axios.get("/QueryClassthree", {params: {storeid: 1, classtwo: this.com.classtweid}})
                    .then((response) => {
                        this.three = response.data;
                    });
            },
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {
                    });
            }
        }
    }
</script>

<style scoped>
    .el-input {
        width: 200px;
    }

    .el-select {
        width: 200px;
    }

    .addcom {
        margin-left: 25%;
        margin-top: 5%;
    }

    .fenlei {
        width: 97px;
    }

    /*.el-button{*/
    /*margin-left: 200px;*/
    /*}*/
</style>